<template>
  <a-modal
    title-align="start"
    width="1000px"
    :title="`预览-${currentForm?.formName}`"
    :visible="formRenderVisible"
    @cancel="formRenderVisible = false"
  >
    <a-scrollbar style="max-height:650px; overflow: auto;">
      <form-render
        v-if="formRenderVisible"
        ref="previewFormRef"
        v-model:model="formModel"
        :form-disable="formDisable"
        :form-config="formConfig"
        :form-list="formList"
        :form-permission="formPermission"
      />
    </a-scrollbar>
    <template #footer>
      <a-button-group type="primary" status="normal">
        <a-button @click.stop="getFormModel">
          <template #icon>
            <icon-paste />
          </template>
          获取表单值
        </a-button>
        <a-button @click.stop="resetFormModel">
          <template #icon>
            <icon-refresh />
          </template>
          重置表单
        </a-button>
        <a-button @click.stop="validateFormModel">
          <template #icon>
            <icon-check />
          </template>
          校验表单
        </a-button>
        <a-button @click.stop="clearValidate">
          <template #icon>
            <icon-refresh />
          </template>
          重置校验
        </a-button>
        <a-button :loading="loading" @click.stop="saveFormModel">
          <template #icon>
            <icon-save />
          </template>
          保存表单值
        </a-button>
        <a-button :loading="loading" @click.stop="formDisable = !formDisable">
          <template #icon>
            <icon-check-circle v-if="formDisable" />
            <icon-stop v-else />
          </template>
          {{ formDisable ? '启用表单' : '禁用表单' }}
        </a-button>
      </a-button-group>
    </template>

    <!--JSON-->
    <code-editor
      ref="codeEditorRef"
      v-model:code="showJSON"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue';
import { updateForm, SysFrom } from '@/api/system/form';
import { cloneDeep } from 'lodash';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import CodeEditor from '@/components/code-editor/index.vue';
import FormRender from '@/components/form-render/index.vue';

const emits = defineEmits(['submit']);

const { loading, setLoading } = useLoading(false);

const formRenderVisible = ref(false);

const currentForm = ref<SysFrom>({});

const formDisable = ref(false);

const formConfig = ref({});

const formList = ref([]);

const formModel = ref({});

const formPermission = ref({});

const showJSON = ref('');

const codeEditorRef = ref();

const previewFormRef = ref();

const getFormModel = () => {
  showJSON.value = JSON.stringify(formModel.value, null, 2);
  codeEditorRef.value.open();
};

const validateSuccessCallBack = () => {
  Message.success('校验成功');
};

const validateFailCallBack = () => {
  Message.error('校验失败');
};

const validateFormModel = () => {
  previewFormRef.value.validateFormField(validateSuccessCallBack, validateFailCallBack);
};

const clearValidate = () => {
  previewFormRef.value.clearValidate();
};

const resetFormModel = () => {
  formModel.value = {};
  previewFormRef.value.clearValidate();
};

const saveFormModel = () => {
  currentForm.value.formModel = formModel;
  previewFormRef.value.validateFormField(() => {
    loading.value = true;
    updateForm(currentForm.value).then(res => {
      formRenderVisible.value = false;
      Message.success('保存成功');
      emits('submit');
    }).finally(() => {
      loading.value = false;
    });
  }, validateFailCallBack);
};

const open = (sysForm: SysFrom) => {
  currentForm.value = cloneDeep(sysForm);
  formModel.value = sysForm.formModel || {};
  formConfig.value = sysForm.formConfig;
  formList.value = sysForm.formList;
  formPermission.value = sysForm.formPermission;
  formDisable.value = false;
  formRenderVisible.value = true;
};

defineExpose({
  open
});
</script>

<script lang="ts">
export default {
  name: 'DialogPreview'
};
</script>

<style scoped>

</style>